<template>
  <div class="value-container" @click="handleClick">
    <span class="value-left">{{ real_value.toFixed(decimal / 1) }}</span>
    <span v-if="unit" class="value-right">{{ unit }}</span>
  </div>
</template>
<script>
export default {
  props: {
    // 值
    value: {
      type: [Number, String],
      require: true,
    },
    // 单位
    unit: {
      type: String,
      default: "",
    },
    // 小数位数
    decimal: {
      type: [Number, String],
      default: 0,
    },
  },
  computed: {
    real_value() {
      return Number(this.value);
    },
  },
  methods: {
    handleClick() {
      this.$emit("click");
    },
  },
};
</script>
<style scoped lang="scss">
.value-container {
  display: flex;
  align-items: center;
  color: #303133;
  .value-left {
    font-size: 22px;
  }
  .value-right {
    font-size: 12px;
    margin-left: 1px;
    margin-top: 5px;
  }
}
</style>
